<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%">
    <el-col :span="8">
      <el-text style="font-size: 30px">库存预警</el-text>
    </el-col>
    <el-col :span="8" style="text-align: right;padding-right: 2%">

    </el-col>
    <el-col :span="8" style="text-align: center">
      <el-button size="large" round style="width: 150px;" @click="checkPurchase">加入进货单</el-button>
    </el-col>
  </el-row>
  <div style="margin-top: 2vh">
    <el-table :data="tableData(store.warnInventory)"
              height="74vh"
              style="width: 100%;"
              :header-cell-style="{ background: '#f6f6f6',  }"
              @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"  />
      <el-table-column label="商品名/条码" width="300">
        <template #default="scope">
          <el-row>
            <el-col span="24" style="padding-left: 5%;">
              <el-row style="max-width: 145px"><el-text>{{ scope.row.goodsName }}</el-text></el-row>
              <el-row><el-text>{{ scope.row.code }}</el-text></el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="cost" label="成本价" />
      <el-table-column prop="inventory" label="库存"/>
      <el-table-column prop="warn" label="预警库存"/>
      <el-table-column label="预进货数">
        <template #default="scope">
          <el-input-number v-model="scope.row.num" :min="1"  style="width: 60%"/>
        </template>
      </el-table-column>
    </el-table>
    <div style="justify-content: center;align-items:center;height: 60px; background-color: rgba(255,255,255,0.72);boxShadow:1px 0px 1px #a6a6a6;z-index: 999;display: flex;padding: 5px 25px 5px 25px;">
      <div style="flex: 4;" >
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="->,prev, pager, next, jumper"
            :total="store.warnInventory.length"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <el-dialog v-model="showCheck" title="以下商品进货后仍属于预警库存，是否继续？" width="40%" center>
    <el-row justify="center">
      <el-table :data="purchaseTemp"
                height="50vh"
                style="width: 100%;"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column label="商品名/条码" width="200">
          <template #default="scope">
            <el-row>
              <el-col span="24" style="padding-left: 5%;">
                <el-row style="max-width: 145px"><el-text>{{ scope.row.goodsName }}</el-text></el-row>
                <el-row><el-text>{{ scope.row.code }}</el-text></el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="inventory" label="库存" />
        <el-table-column prop="warn" label="预警库存" />
        <el-table-column prop="num" label="进货数" />
      </el-table>

    </el-row>
    <template #footer>
      <span style="text-align: center">
        <el-button  @click="showCheck=false">
          否
        </el-button>
        <el-button  @click="inPurchase">
          是
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import {ref} from "vue";
import {store} from "@/store";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
const currentPage = ref(1)
const pageSize = ref(30)
const multipleSelection=ref([])
let showCheck=ref(false)
const purchaseTempAll=ref([])
let purchaseTemp=[]
const tableData = (list) => {
  return list.filter(
      (item, index) =>
          index < currentPage.value * pageSize.value &&
          index >= pageSize.value * (currentPage.value - 1)
  );
};
const handleCurrentChange = (e) => {
  currentPage.value = e;
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const checkPurchase = () => {
  if (multipleSelection.value.length===0){
    ElMessage({
      message: '未选中商品',
      type: 'warning',
    })
  }else {
    purchaseTempAll.value=multipleSelection.value.filter((p)=>{
      if (p.num===undefined)
        p.num=1
      return true
    })
    const temp=multipleSelection.value.filter((p)=>{
      if (p.num===undefined)
        p.num=1
      return p.num+p.inventory<=p.warn
    })
    if (temp.length!==0){
      purchaseTemp=temp
      showCheck.value=true
    }else
      inPurchase()
  }

}
const inPurchase = () => {
  if (showCheck.value===true)
    showCheck.value=false
  request.get("/goods/get/goodsPurchase/"+store.getLocalCurrentStoreMain().storeId+"?isDone=0").then(res=>{
    if (res.data.length===0){
      let goodsPurchase={
        name:Date.now(),
        storeId:store.getLocalCurrentStoreMain().storeId,
        orderDetailObject:purchaseTempAll.value,
      }

      request.post("/goods/add/goodsPurchase",goodsPurchase).then(res=>{
        ElMessage({
          message: '已新增进货单',
          type: 'success',
        })
      })
    }else {
      for (let item in purchaseTempAll.value){
        if (res.data[0].orderDetailObject.filter((p)=>{return p.code.indexOf(purchaseTempAll.value[item].code) !==-1}).length!==0){
          res.data[0].orderDetailObject[res.data[0].orderDetailObject.indexOf(res.data[0].orderDetailObject.filter((p)=>{
            return p.code.indexOf(purchaseTempAll.value[item].code) !==-1})[0])]=purchaseTempAll.value[item]
        }else {
          res.data[0].orderDetailObject.push(purchaseTempAll.value[item])
        }
      }
      request.post("/goods/update/goodsPurchase",res.data[0]).then(res=>{
        ElMessage({
          message: '已将选中商品加入进货单',
          type: 'success',
        })
      })
    }
  })
}
</script>

<style scoped>

</style>